<template>
	<div class="page">
		<div class="cardbox">
			<el-row :gutter="30" class="elrow">
				<el-col :span="6" class="elcol">
					<div class="grid-content bg-purple" @click="gorouter(1)">
						<div class="tubiao">
							<div class="yuan yuanbg1">
								<img src="@/assets/images/icon3.png" alt="" class="yuanico">
							</div>
							<div class="conter">
								<div class="num">{{total_pro_num}}</div>
								<div class="title">在建项目数</div>
							</div>
						</div>
						<div class="bg"></div>
					</div>
				</el-col>
				<el-col :span="6" class="elcol">
					<div class="grid-content bg-purple" @click="gorouter(2)">
						<div class="tubiao">
							<div class="yuan yuanbg2">
								<img src="@/assets/images/icon4.png" alt="" class="yuanico2">
							</div>
							<div class="conter">
								<div class="num">{{total_warn_num}}</div>
								<div class="title">预警总数</div>
							</div>
						</div>
						<div class="bg"></div>
					</div>
				</el-col>
				<el-col :span="6" class="elcol">
					<div class="grid-content bg-purple" @click="gorouter(2)">
						<div class="tubiao">
							<div class="yuan yuanbg3">
								<img src="@/assets/images/icon5.png" alt="" class="yuanico2">
							</div>
							<div class="conter">
								<div class="num">{{total_warn1_num}}</div>
								<div class="title">一次预警总数</div>
							</div>
						</div>
						<div class="bg"></div>
					</div>
				</el-col>
				<el-col :span="6" class="elcol">
					<div class="grid-content bg-purple" @click="gorouter(2)">
						<div class="tubiao">
							<div class="yuan yuanbg4">
								<img src="@/assets/images/icon6.png" alt="" class="yuanico2">
							</div>
							<div class="conter">
								<div class="num">{{total_warn2_num}}</div>
								<div class="title">二次预警总数</div>
							</div>
						</div>
						<div class="bg"></div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="centerbox">
			<el-row :gutter="30" class="elrow">
				<el-col :span="8" class="elcol">
					<div class="charsbox">
						<div class="charstitle">
							<div class="bar"></div>
							<div class="title">阶段统计</div>
						</div>
						<div class="chars">
							<w-e-charts class="comchars" :options="chart1" />
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="elcol">
					<div class="charsbox hideen">
						<div class="charstitle">
							<div class="bar"></div>
							<div class="title">项目类型统计</div>
						</div>
						<div class="chars auto" style="margin-top: 20px;">
							<div class="Progress" v-for="(val,index) in protypepie" :key="index">
								<div class="title">{{val.project_code_desc}}</div>
								<div class="proBox">
									<div class="pro"><el-progress :percentage="val.doing_num_per" :color="customcolor[index]" :show-text="false"></el-progress></div>
									<div class="num" :class="fontclass[index]">{{val.doing_num}}</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="10" class="elcol">
					<div class="charsbox">
						<div class="charstitle">
							<div class="bar"></div>
							<div class="title">项目持续时间统计</div>
						</div>
						<div class="chars">
							<w-e-charts class="comchars" :options="chart3" />
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="footerbox">
			<el-row :gutter="30" class="elrow">
				<el-col :span="14" class="elcol">
					<div class="charsbox">
						<div class="charstitle">
							<div class="bar"></div>
							<div class="title">项目超时预警数量排名top10</div>
						</div>
						<div class="chars">
							<w-e-charts class="comchars" :options="chart4" />
						</div>
					</div>
				</el-col>
				<el-col :span="10" class="elcol">
					<div class="charsbox">
						<div class="charstitle">
							<div class="bar"></div>
							<div class="title">各部门预警次数</div>
						</div>
						<div class="chars">
							<w-e-charts class="comchars" :options="chart2" />
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts';
import WECharts from '@/components/WECharts/WECharts.vue';
import api    from '@/api/api'
export default {
	name      : "statistics-of-projects-under-construction",
	components: { WECharts },
	props     : {},
	data() {return {
		customcolor:['#409eff','#27CA95','#FEC105','#BEC3D1'],
		fontclass:['numcor1','numcor2','numcor3','numcor4'],
		total_pro_num:'',
		total_warn_num:'',
		total_warn1_num:'',
		total_warn2_num:'',
		protypepie:{},
		chart1      : {},
		chart2      : {},
		chart3      : {},
		chart4      : {},
	}},
	computed  : {},
	watch     : {},
	methods   : {
		//点击选项卡跳转
		gorouter(i){
			if(i == 1){
				this.$router.push('project-progress-tracking')
			}else{
				this.$router.push('task-timeout-warning')
			}
		},
		//头部统计
		getTitledata(){
			api.get['/rest/doingAnalyse/queryTitleData']()
				.then(({data}) => {
					if (!data) return;
					this.total_pro_num = data.data.total_pro_num;
					this.total_warn_num = data.data.total_warn_num;
					this.total_warn1_num = data.data.total_warn1_num;
					this.total_warn2_num = data.data.total_warn2_num;
				})
		},
		//阶段统计
		getStepbar(){
			api.get['/rest/doingAnalyse/queryStepBar']()
				.then(({data}) => {
					if (!data) return;
					const vdesc = data.data.vdesc;
					const value = data.data.value;
					this.buildChart1(vdesc,value);
				})
		},
		//项目类型统计
		getProtypepie(){
			api.get['/rest/doingAnalyse/queryProTypePie']()
				.then(({data}) => {
					if (!data) return;
					this.protypepie = data.data;
				})
		},
		//项目持续时间统计
		getDursumline(){
			api.get['/rest/doingAnalyse/queryDurSumLine']()
				.then(({data}) => {
					if (!data) return;
					const vdesc = data.data.vdesc;
					const value = data.data.value;
					this.buildChart3(vdesc,value);
				})
		},
		//项目超时预警数量排名top10
		getWarntop(){
			api.get['/rest/doingAnalyse/queryWarnTop']()
				.then(({data}) => {
					if (!data) return;
					const title = data.data.title;
					const vdesc = data.data.vdesc;
					const warn1 = data.data.warn1;
					const warn2 = data.data.warn2;
					this.buildChart4(title,vdesc,warn1,warn2)
				})
		},
		//各部门预警次数
		getDeptpie(){
			api.get['/rest/doingAnalyse/queryDeptPie']()
				.then(({data}) => {
					if (!data) return;
					const piedata = data.data;
					this.buildChart2(piedata)
				})
		},
		buildChart1(data1,data2){
			this.chart1 ={
				    grid: {
						left: '8%',
						right: '8%',
						bottom: '5%',
						top: '10%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						show: false,
						axisPointer: {
							type: 'none'
						},
						formatter: function(params) {
							return params[0].name + '<br/>' +
								"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
								params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' 万元<br/>'
						}
					},
					// backgroundColor: 'rgb(20,28,52)',
					xAxis: {
						show: false,
						type: 'value'
					},
					yAxis: [{
						type: 'category',
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#AFAFAF'
							},
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						data: data1
					}, {
						type: 'category',
						inverse: true,
						axisTick: 'none',
						axisLine: 'none',
						show: true,
						axisLabel: {
							textStyle: {
								color: '#AFAFAF',
								fontSize: '12'
							},
							// formatter: function(value) {
							// 	if (value >= 10000) {
							// 		return (value / 10000).toLocaleString() + '万';
							// 	} else {
							// 		return value.toLocaleString();
							// 	}
							// },
						},
						data: data2
					}],
					series: [{
							name: '金额',
							type: 'bar',
							barWidth: 8,
							zlevel: 1,
							itemStyle: {
								normal: {
									barBorderRadius: 20,
									color:'#4D7FFB',
									// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									// 	offset: 0,
									// 	color: 'rgb(57,89,255,1)'
									// }, {
									// 	offset: 1,
									// 	color: 'rgb(46,200,207,1)'
									// }]),
								},
							},
							data: data2
						},
						
					]
			};
		},
		buildChart2(data1){
			this.chart2 = {
				tooltip: {
					trigger: 'item',
					formatter: '{b} : <br/>{c} ({d}%)'
				},
				legend: {
					type: 'scroll',
					orient: 'vertical',
					icon: "circle",
					right: '5%',
					top: '20%',
					bottom: 20,
					itemHeight:10,
					itemWidth:10,
					
					textStyle: {
						color: '#818181',
						fontSize: 14,
						padding: [5,0,5,0],
						
					},
					// formatter: function (name) {
					// 	if (!name) return '';
					// 	if (name.length > 5) {
					// 		return name =  name.slice(0,5) + '...';
					// 	}
					// },
					tooltip: {
						show: false
					}
				},
				color : [ '#4E81FF', '#2ADDD6', '#4ECB73', '#FEC104', '#FF6C6C' ],
				series: [
					{
						// name: '姓名',
						type: 'pie',
						radius: ['30%', '60%'],
						center: ["40%", "50%"], 
						label:{      
							normal:{
								show:false,
								textStyle: {
									color: '#FFFFFFFF'
								},
								formatter:'{d}%'
							}
						},
						data: data1,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
		},
		buildChart3(data1,data2) {
			this.chart3 = {
				legend : {
					selectedMode: 'single',
					icon        : 'rect',
					right       : '4%',
					top         : '3%',
					textStyle   : {
						color: '#90979c',
					},
					itemGap     : 30,
					itemWidth   : 28,
					itemHeight  : 10,
				},
				tooltip: {
					show : true,
					trigger: 'item',
            		formatter: '{b}: <br/>{c}'
				},
				grid   : {
					top   : '15%',
					left  : '15%',
					right : '5%',
					bottom: '10%',
				},
				xAxis  : [
					{
						type       : 'category',
						axisLine   : {
							show: false
						},
						splitArea  : {
							// show: true,
							color    : '#AFAFAF',
							lineStyle: {
								color: '#AFAFAF'
							},
						},
						axisLabel  : {
							color: '#AFAFAF'
						},
						splitLine  : {
							show: false
						},
						axisTick : {
							show: false,
						},
						// boundaryGap: false,
						data       : data1,

					}
				],
				yAxis  : [
					{
						type     : 'value',
						minInterval:1,//设置正整数
						min      : 0,
						// max: 140,
						splitArea: {
							show: false,
						},
						splitLine: {
							show     : true,//Y轴刻度
							lineStyle: {
								color: '#CDD5E6',
								type:'dashed'
							}
						},
						axisLine : {
							show: false,
						},
						axisLabel: {//y轴文字
							show     : true,
							// margin   : 20,
							textStyle: {
								color: '#AFAFAF',

							},
						},
						axisTick : {
							show: false,
						},
					}
				],
				series : [
					{
						// name         : '已付金额',
						type         : 'line',
						smooth       : false, //是否平滑
						showAllSymbol: true,
						// symbol: 'image://./static/images/guang-circle.png',
						symbol       : 'circle',
						symbolSize   : 10,
						lineStyle    : {
							normal: {
								color        : "#41A8FF",
								// shadowColor  : 'rgba(0, 0, 0, .3)',
								// shadowBlur   : 0,
								// shadowOffsetY: 5,
								// shadowOffsetX: 5,
							},
						},
						label        : {
							show     : true,
							position : 'top',
							textStyle: {
								color: '#fff',
							}
						},

						itemStyle: {
							color        : "#fff",
							borderColor  : "#41A8FF",
							borderWidth  : 2,
							shadowColor  : 'rgba(0, 0, 0, .3)',
							shadowBlur   : 0,
							// shadowOffsetY: 2,
							// shadowOffsetX: 2,
						},
						tooltip  : {
							show: true
						},
						areaStyle: {
							normal: {
								color      : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color : 'rgba(96, 182, 255,0.3)'
									},
									{
										offset: 1,
										color : 'rgba(96, 182, 255,0)'
									}
								], false),
								shadowColor: 'rgba(96, 182, 255, 0.9)',
								shadowBlur : 20
							}
						},
						data     : data2,
					},
				]
			};
		},
		buildChart4(data1,data2,data3,data4){
			this.chart4 = {
				tooltip: {
					trigger: 'item',
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				title  : {
					text     : '单位: 台',
					textStyle: {
						color   : '#fff',
						fontSize: 14,
					},
					top      : 15,
					left     : 48
				},
				legend : {
					icon: "circle", 
					data      : data1,
					top       : '1%',
					right     : '4%',
					textStyle : {
						color: '#AFAFAF',
					},
					itemGap   : 45,
					itemWidth : 10,
					itemHeight: 10,

				},
				color : [ '#4E81FF', '#D7E3FC', '#4ECB73', '#FEC104', '#FF6C6C' ],
				grid   : {
					top         : '13%',
					left        : '3%',
					right       : '4%',
					bottom      : '1%',
					containLabel: true
				},
				xAxis  : [
					{
						type     : 'category',
						data     : data2,
						axisLine : {
							show     : false,
							lineStyle: {
								color: 'rgba(255,255,255,.1)'
							}
						},
						axisTick : {
							show: false,
						},
						axisLabel: {
							color     : '#AFAFAF',
							lineHeight: 18,
							interval:0,
							formatter:function(params) {
								var newParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 3;  //一行显示几个字
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;
									}

								} else {
									newParamsName = params;
								}
								return newParamsName
							},
						}
					}
				],
				yAxis  : [
					{
						type     : 'value',
						minInterval:1,//设置正整数
						min      : 0,
						splitArea: {
							show: false,
						},
						splitLine: {
							show     : true,//Y轴线
							lineStyle: {
								color: '#CDD5E6',
								type:'dashed'
							}
						},
						axisLine : {
							show: false,
						},
						axisTick : {
							show: false,
						},
						axisLabel: {
							color: '#AFAFAF'
						}
					}
				],
				series : [
					{
						name    : data1[0],
						type    : 'bar',
						stack   : '广告',
						data    : data3,
						barWidth: 15
					},
					{
						name    : data1[1],
						type    : 'bar',
						stack   : '广告',
						data    : data4,
						barWidth: 15
					},

				],
			};
		},

	},
	beforeCreate() {},
	created() {},
	beforeMount() {},
	mounted() {
		this.getProtypepie();
		this.getTitledata();
		this.getStepbar();
		this.getDursumline();
		this.getWarntop();
		this.getDeptpie();
	},
	activated() {},
	deactivated() {},
	beforeUpdate() {},
	updated() {},
	beforeDestroy() {},
	destroyed() {},
	errorCaptured() {},
	beforeRouteEnter(to, from, next) {next()},
	beforeRouteUpdate(to, from, next) {next()},
	beforeRouteLeave(to, from, next) {next()}
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";
	.page{
		// padding: 40px;
		.cardbox{
			width: 100%;
			height: 140px;
			.elrow{
				height: 100%;
				.elcol{
					height: 100%;
					.grid-content{
						height: 100%;
						position: relative;
						display: flex;
						flex-direction: row;
						.tubiao{
							padding: 0 20px;
							display: flex;
							align-items: center;

							.yuan{
								width: 60px;
								height: 60px;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-right: 20px;
								.yuanico{
									width: 29px;
									height: 25px;
								}
								.yuanico2{
									width: 27px;
									height: 27px;
								}
							}
							.conter{
								display: flex;
								flex-direction: column;
								.num{
									font-size: 28px;
									color: #575E68;
								}
								.title{
									font-size: 16px;
									color: #BFC5D3;
								}
							}
							.yuanbg1{
								background: #DCE5FF;
							}
							.yuanbg2{
								background: #D4F5E9;
							}
							.yuanbg3{
								background: rgba(255, 201, 33, 0.2);
							}
							.yuanbg4{
								background: #FFCCCC;
							}

						}
						.bg{
							position: absolute;
							right: 0;
							top: 0;
							width: 149px;
							height: 140px;
							background: url("~@/assets/images/cardbg.png") no-repeat;
                			background-size:100% 100% ;
						}
					}
					.bg-purple{
						background: #FFFFFF;
						cursor: pointer;
					}
				}
				
			}
			
		}
		.centerbox{
			width: 100%;
			height: 340px;
			margin: 30px 0;
			.elrow{
				height: 100%;
				.elcol{
					height: 100%;
					.charsbox{
						width: 100%;
						height: 100%;
						background: #FFFFFF;
						.charstitle{
							width: 100%;
							height: 47px;
							display: flex;
							flex-direction: row;
							padding-top: 15px;
							.bar{
								width: 3px;
								height: 16px;
								background: #4C81F6;
								margin: 0 10px 0 25px;
							}
							.title{
								font-size: 16px;
								color: #3A404C;
								font-weight: 600;
							}
						}
						.chars{
							width: 100%;
							height: calc(100% - 62px);
							.Progress{
								width: 100%;
								display: flex;
								flex-direction: column;
								padding: 0 15px 25px 30px;
								.proBox{
									display: flex;
									flex-direction: row;
									.pro{
										width: 70%;
									}
									.num{
										font-size: 12px;
										line-height: 5px;
										margin-left: 15px;
									}
									.numcor1{
										color: #4D7FFB;
									}
									.numcor2{
										color: #27CA95;
									}
									.numcor3{
										color: #FEC105;
									}
									.numcor4{
										color: #BEC3D1;
									}
								}
								.title{
									font-size: 14px;
									color: #848EA2;
									padding-bottom: 7px;
								}
							}
						}
						
					}
				}
			}
		}
		.footerbox{
			width: 100%;
			height: 360px;
			.elrow{
				height: 100%;
				.elcol{
					height: 100%;
					.charsbox{
						width: 100%;
						height: 100%;
						background: #FFFFFF;
						.charstitle{
							width: 100%;
							height: 47px;
							display: flex;
							flex-direction: row;
							padding-top: 15px;
							.bar{
								width: 3px;
								height: 16px;
								background: #4C81F6;
								margin: 0 10px 0 25px;
							}
							.title{
								font-size: 16px;
								color: #3A404C;
								font-weight: 600;
							}
						}
						.chars{
							width: 100%;
							height: calc(100% - 62px);
						}
					}
				}
			}
		}
	}
.comchars{
	width: 100%;
	height: 100%;
}
.hideen{
	overflow: hidden;
}
.auto{
	overflow-y: auto;
}
</style>
